// 全局变量
let currentFile = null;
let convertedBlob = null;

// DOM元素
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const settingsSection = document.getElementById('settingsSection');
const resultSection = document.getElementById('resultSection');
const loadingOverlay = document.getElementById('loadingOverlay');
const scaleInput = document.getElementById('scaleInput');
const scaleValue = document.getElementById('scaleValue');
const formatSelect = document.getElementById('formatSelect');
const convertBtn = document.getElementById('convertBtn');
const downloadBtn = document.getElementById('downloadBtn');
const svgContainer = document.getElementById('svgContainer');
const imageContainer = document.getElementById('imageContainer');

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeEventListeners();
    updateScaleValue();
});

// 初始化事件监听器
function initializeEventListeners() {
    // 文件输入变化
    fileInput.addEventListener('change', handleFileSelect);
    
    // 拖拽事件
    uploadArea.addEventListener('dragover', handleDragOver);
    uploadArea.addEventListener('dragleave', handleDragLeave);
    uploadArea.addEventListener('drop', handleDrop);
    
    // 缩放控制
    scaleInput.addEventListener('input', updateScaleValue);
    
    // 格式选择变化
    formatSelect.addEventListener('change', updatePreview);
    
    // 转换按钮
    convertBtn.addEventListener('click', convertSvg);
    
    // 下载按钮
    downloadBtn.addEventListener('click', downloadImage);
}

// 处理文件选择
function handleFileSelect(event) {
    const file = event.target.files[0];
    if (file && file.type === 'image/svg+xml') {
        processFile(file);
    } else {
        showError('请选择有效的SVG文件');
    }
}

// 处理拖拽悬停
function handleDragOver(event) {
    event.preventDefault();
    uploadArea.classList.add('dragover');
}

// 处理拖拽离开
function handleDragLeave(event) {
    event.preventDefault();
    uploadArea.classList.remove('dragover');
}

// 处理文件拖拽
function handleDrop(event) {
    event.preventDefault();
    uploadArea.classList.remove('dragover');
    
    const files = event.dataTransfer.files;
    if (files.length > 0) {
        const file = files[0];
        if (file.type === 'image/svg+xml') {
            processFile(file);
        } else {
            showError('请拖拽有效的SVG文件');
        }
    }
}

// 处理文件
function processFile(file) {
    currentFile = file;
    
    // 显示设置区域
    settingsSection.style.display = 'block';
    resultSection.style.display = 'none';
    
    // 预览SVG
    previewSvg(file);
    
    // 更新预览
    updatePreview();
}

// 预览SVG
function previewSvg(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const svgContent = e.target.result;
        svgContainer.innerHTML = svgContent;
    };
    reader.readAsText(file);
}

// 更新缩放值显示
function updateScaleValue() {
    const scale = parseFloat(scaleInput.value);
    scaleValue.textContent = scale.toFixed(1) + 'x';
    updatePreview();
}

// 更新预览
function updatePreview() {
    if (!currentFile) return;
    
    // 这里可以添加实时预览逻辑
    // 由于浏览器限制，我们主要依赖服务器端转换
    imageContainer.innerHTML = '<p style="color: #666;">转换后将显示预览</p>';
}

// 转换SVG
async function convertSvg() {
    if (!currentFile) {
        showError('请先选择SVG文件');
        return;
    }
    
    const formData = new FormData();
    formData.append('svgFile', currentFile);
    formData.append('format', formatSelect.value);
    formData.append('scale', scaleInput.value);
    
    try {
        showLoading(true);
        convertBtn.disabled = true;
        
        const response = await fetch('/convert', {
            method: 'POST',
            body: formData
        });
        
        if (response.ok) {
            const blob = await response.blob();
            convertedBlob = blob;
            
            // 显示结果
            showResult();
            
            // 在结果区域显示预览图片
            const resultContent = document.querySelector('.result-content');
            const previewDiv = document.createElement('div');
            previewDiv.style.cssText = 'margin: 20px 0; text-align: center;';
            
            const url = URL.createObjectURL(blob);
            previewDiv.innerHTML = `<img src="${url}" alt="转换后的图片" style="max-width: 100%; max-height: 300px; object-fit: contain; border: 1px solid #eee; border-radius: 8px;">`;
            
            // 显示转换信息
            const format = formatSelect.value;
            const scale = scaleInput.value;
            const infoDiv = document.createElement('div');
            infoDiv.style.cssText = 'margin-top: 10px; font-size: 0.9rem; color: #666;';
            infoDiv.innerHTML = `
                <p>格式: ${format.toUpperCase()}</p>
                <p>缩放: ${scale}x</p>
                <p>文件大小: ${(blob.size / 1024).toFixed(1)} KB</p>
            `;
            previewDiv.appendChild(infoDiv);
            
            // 插入到下载按钮之前
            const downloadBtn = document.getElementById('downloadBtn');
            resultContent.insertBefore(previewDiv, downloadBtn);
            
        } else {
            const errorData = await response.json();
            showError(errorData.error || '转换失败');
        }
    } catch (error) {
        console.error('转换错误:', error);
        showError('转换过程中发生错误');
    } finally {
        showLoading(false);
        convertBtn.disabled = false;
    }
}

// 显示结果
function showResult() {
    settingsSection.style.display = 'none';
    resultSection.style.display = 'block';
}

// 下载图片
function downloadImage() {
    if (!convertedBlob) {
        showError('没有可下载的文件');
        return;
    }
    
    const url = URL.createObjectURL(convertedBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `converted-${Date.now()}.${formatSelect.value}`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

// 重置应用
function resetApp() {
    currentFile = null;
    convertedBlob = null;
    
    // 重置UI
    settingsSection.style.display = 'none';
    resultSection.style.display = 'none';
    svgContainer.innerHTML = '';
    imageContainer.innerHTML = '';
    fileInput.value = '';
    scaleInput.value = '1';
    updateScaleValue();
    
    // 清理结果区域的预览图片
    const resultContent = document.querySelector('.result-content');
    const previewDivs = resultContent.querySelectorAll('div');
    previewDivs.forEach(div => {
        if (div.querySelector('img')) {
            div.remove();
        }
    });
    
    // 移除错误消息
    const errorMessages = document.querySelectorAll('.error-message');
    errorMessages.forEach(msg => msg.remove());
}

// 显示加载状态
function showLoading(show) {
    loadingOverlay.style.display = show ? 'flex' : 'none';
}

// 显示错误消息
function showError(message) {
    // 移除现有错误消息
    const existingError = document.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }
    
    // 创建新的错误消息
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.textContent = message;
    
    // 插入到主容器中
    const main = document.querySelector('main');
    main.insertBefore(errorDiv, main.firstChild);
    
    // 3秒后自动移除
    setTimeout(() => {
        if (errorDiv.parentNode) {
            errorDiv.remove();
        }
    }, 3000);
} 